import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ThemeSettingScreen extends ConsumerStatefulWidget {
  const ThemeSettingScreen({super.key});

  @override
  _ThemeSettingScreenState createState() => _ThemeSettingScreenState();
}

class _ThemeSettingScreenState extends ConsumerState<ThemeSettingScreen> {
  bool _isDarkMode = false;
  bool _isAnimationEnabled = false;
  String _selectedAnimationType = '渐变';

  final List<Color> _themeColors = [
    Colors.blue,
    Colors.green,
    Colors.orange,
    Colors.red,
    Colors.purple,
    Colors.pink,
    Colors.yellow,
    Colors.brown,
    Colors.cyan,
  ];
  Color _selectedColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('主题设置'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 主题模式开关
            ListTile(
              title: const Text('主题模式'),
              subtitle: Text(_isDarkMode ? '暗黑模式' : '明亮模式'),
              trailing: Switch(
                value: _isDarkMode,
                onChanged: (value) {
                  setState(() {
                    _isDarkMode = value;
                  });
                },
              ),
            ),
            const Divider(),

            // 系统主题颜色选择
            const Text(
              '系统主题色',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            GridView.builder(
              shrinkWrap: true,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                childAspectRatio: 1,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              itemCount: _themeColors.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      _selectedColor = _themeColors[index];
                    });
                  },
                  child: Container(
                    color: _themeColors[index],
                    child: _selectedColor == _themeColors[index]
                        ? const Icon(Icons.check, color: Colors.white)
                        : null,
                  ),
                );
              },
            ),
            const Divider(),

            // 页面切换动画开关
            ListTile(
              title: const Text('启用动画'),
              trailing: Switch(
                value: _isAnimationEnabled,
                onChanged: (value) {
                  setState(() {
                    _isAnimationEnabled = value;
                  });
                },
              ),
            ),
            const Divider(),

            // 动画类型选择
            const Text(
              '动画类型',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            DropdownButton<String>(
              value: _selectedAnimationType,
              items: ['渐变', '缩放', '滑动']
                  .map((String value) => DropdownMenuItem<String>(
                        value: value,
                        child: Text(value),
                      ))
                  .toList(),
              onChanged: (newValue) {
                setState(() {
                  _selectedAnimationType = newValue!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}
